<template>
  <div class="page sound-settings">
    <div class="scroll-view">
      <customHeader middleTitle="收款语音设置"
                    @leftCallBack="goBack" />
      <!-- <paymentCode v-if="paymentCodeShow"
                   ref="paymentCode"
                   :type="type"
                   :shopId="shopId"
                   :sn="sn"
                   :shopName="shopName"
                   @setChecked="handleSetChecked"
                   @handleCancel="handlePaymentCodeCancel" /> -->
      <selecteDevice v-if="selecteDeviceShow"
                     ref="selecteDevice"
                     :type="type"
                     :shopId="shopId"
                     :sn="sn"
                     :shopName="shopName"
                     @setChecked="handleSelecteDeviceChecked"
                     @handleCancel="handleSelecteDeviceCheckedCancel" />
      <!-- <selecteStaff v-if="selecteStaffShow"
                    ref="selecteStaff"
                    :type="type"
                    :shopId="shopId"
                    :sn="sn"
                    :shopName="shopName"
                    @setChecked="handleSelecteStaffChecked"
                    @handleCancel="handleSelecteStaffCheckedCancel" /> -->
      <div class="page-body">
        <div class="img"></div>
        <template v-if="type==17||type==21||type==37||type==51||type==55||type==57||type==58||type==59||type==60||type==61">
          <div class="device-info" v-if="type==57||type==58">
            <span class="name">{{deviceName}}</span>
            <span class="sn">{{sn}}</span>
          </div>
          <div class="ul-title">播报来源</div>
          <ul class="ul-list">
            <li v-if="switchInfo['QRCODE_VOICE']">
              <span>收款码收款</span>
              <div>
                <mt-switch v-model="switchInfo['QRCODE_VOICE'].switchModel"
                           @change="handleSwitchChange(switchInfo['QRCODE_VOICE'])"></mt-switch>
              </div>
            </li>
            <li v-if="(type==17||type==21||type==37||type==51||type==55||type==57||type==58||type==59||type==60||type==61)&&switchInfo['QRCODE_VOICE']&&switchInfo['QRCODE_VOICE'].switchModel">
              <span>指定收款码</span>
              <div style="height:32px"
                   @click="showSelecteDevice(switchInfo['QRCODE_VOICE'])">
                {{switchInfo['QRCODE_VOICE'].limitation&&switchInfo['QRCODE_VOICE'].limitationList ? `已选择${switchInfo['QRCODE_VOICE'].limitationList.length}个` : '不限制'}}
                <i class="zhk-list_rarrow"></i>
              </div>
            </li>
            <li v-if="switchInfo['APP_COLLECTION_VOICE']&&type!=50&&type!=51&&type!=55&&type!=57&&type!=58&&type!=59&&type!=60||type!=61">
              <span>商家APP收款</span>
              <div>
                <mt-switch v-model="switchInfo['APP_COLLECTION_VOICE'].switchModel"
                           @change="handleSwitchChange(switchInfo['APP_COLLECTION_VOICE'])"></mt-switch>
              </div>
            </li>
            <li v-if="(type==17||type==21||type==37||type==51||type==55||type==57||type==58||type==59||type==60||type==61)&&switchInfo['APP_COLLECTION_VOICE']&&switchInfo['APP_COLLECTION_VOICE'].switchModel">
              <span>指定员工</span>
              <div style="height:32px"
                   @click="showSelecteDevice(switchInfo['APP_COLLECTION_VOICE'])">
                {{switchInfo['APP_COLLECTION_VOICE'].limitation&&switchInfo['APP_COLLECTION_VOICE'].limitationList ? `已选择${switchInfo['APP_COLLECTION_VOICE'].limitationList.length}个` : '不限制'}}
                <i class="zhk-list_rarrow"></i>
              </div>
            </li>
            <li v-if="switchInfo['PC_COLLECTION_VOICE']">
              <span>收银软件收款</span>
              <div>
                <mt-switch v-model="switchInfo['PC_COLLECTION_VOICE'].switchModel"
                           @change="handleSwitchChange(switchInfo['PC_COLLECTION_VOICE'])"></mt-switch>
              </div>
            </li>
            <!-- <li v-if="(type==17||type==21||type==37)&&switchInfo['PC_COLLECTION_VOICE']&&switchInfo['PC_COLLECTION_VOICE'].switchModel">
              <span>指定设备</span>
              <div style="height:32px"
                   @click="showSelecteDevice(switchInfo['PC_COLLECTION_VOICE'])">
                {{switchInfo['PC_COLLECTION_VOICE'].limitation&&switchInfo['PC_COLLECTION_VOICE'].limitationList ? `已选择${switchInfo['PC_COLLECTION_VOICE'].limitationList.length}个` : '不限制'}}
                <i class="zhk-list_rarrow"></i>
              </div>
            </li> -->
            <li v-if="switchInfo['POS_COLLECTION_VOICE']">
              <span>智能POS收款</span>
              <div>
                <mt-switch v-model="switchInfo['POS_COLLECTION_VOICE'].switchModel"
                           @change="handleSwitchChange(switchInfo['POS_COLLECTION_VOICE'])"></mt-switch>
              </div>
            </li>
            <li v-if="(type==17||type==21||type==37||type==51||type==55||type==57||type==58||type==59||type==60||type==61)&&switchInfo['POS_COLLECTION_VOICE']&&switchInfo['POS_COLLECTION_VOICE'].switchModel">
              <span>指定设备</span>
              <div style="height:32px"
                   @click="showSelecteDevice(switchInfo['POS_COLLECTION_VOICE'])">
                {{switchInfo['POS_COLLECTION_VOICE'].limitation&&switchInfo['POS_COLLECTION_VOICE'].limitationList ? `已选择${switchInfo['POS_COLLECTION_VOICE'].limitationList.length}个` : '不限制'}}
                <i class="zhk-list_rarrow"></i>
              </div>
            </li>
            <li v-if="switchInfo['SMART_BOX_COLLECTION_VOICE']&&type!=50&&type!=51&&type!=55&&type!=57&&type!=58&&type!=59&&type!=60||type!=61">
              <span>智慧盒子收款</span>
              <div>
                <mt-switch v-model="switchInfo['SMART_BOX_COLLECTION_VOICE'].switchModel"
                           @change="handleSwitchChange(switchInfo['SMART_BOX_COLLECTION_VOICE'])"></mt-switch>
              </div>
            </li>
            <li v-if="(type==17||type==21||type==51||type==55||type==57||type==58||type==59||type==60||type==61)&&switchInfo['SMART_BOX_COLLECTION_VOICE']&&switchInfo['SMART_BOX_COLLECTION_VOICE'].switchModel">
              <span>指定设备</span>
              <div style="height:32px"
                   @click="showSelecteDevice(switchInfo['SMART_BOX_COLLECTION_VOICE'])">
                {{switchInfo['SMART_BOX_COLLECTION_VOICE'].limitation&&switchInfo['SMART_BOX_COLLECTION_VOICE'].limitationList ? `已选择${switchInfo['SMART_BOX_COLLECTION_VOICE'].limitationList.length}个` : '不限制'}}
                <i class="zhk-list_rarrow"></i>
              </div>
            </li>
            <li v-if="switchInfo['BOX_COLLECTION_VOICE']">
              <span>快小盒收款</span>
              <div>
                <mt-switch v-model="switchInfo['BOX_COLLECTION_VOICE'].switchModel"
                           @change="handleSwitchChange(switchInfo['BOX_COLLECTION_VOICE'])"></mt-switch>
              </div>
            </li>
            <li v-if="(type==17||type==21||type==37||type==51||type==55||type==57||type==58||type==59||type==60||type==61)&&switchInfo['BOX_COLLECTION_VOICE']&&switchInfo['BOX_COLLECTION_VOICE'].switchModel">
              <span>指定设备</span>
              <div style="height:32px"
                   @click="showSelecteDevice(switchInfo['BOX_COLLECTION_VOICE'])">
                {{switchInfo['BOX_COLLECTION_VOICE'].limitation&&switchInfo['BOX_COLLECTION_VOICE'].limitationList ? `已选择${switchInfo['BOX_COLLECTION_VOICE'].limitationList.length}个` : '不限制'}}
                <i class="zhk-list_rarrow"></i>
              </div>
            </li>
            <li v-if="switchInfo['MKL_COLLECTION_VOICE']&&type!=50&&type!=51&&type!=55&&type!=57&&type!=58&&type!=59&&type!=60||type!=61">
              <span>码卡龙收款</span>
              <div>
                <mt-switch v-model="switchInfo['MKL_COLLECTION_VOICE'].switchModel"
                           @change="handleSwitchChange(switchInfo['MKL_COLLECTION_VOICE'])"></mt-switch>
              </div>
            </li>
            <li v-if="(type==17||type==21||type==37)&&switchInfo['MKL_COLLECTION_VOICE']&&switchInfo['MKL_COLLECTION_VOICE'].switchModel">
              <span>指定设备</span>
              <div style="height:32px"
                   @click="showSelecteDevice(switchInfo['MKL_COLLECTION_VOICE'])">
                {{switchInfo['MKL_COLLECTION_VOICE'].limitation&&switchInfo['MKL_COLLECTION_VOICE'].limitationList ? `已选择${switchInfo['MKL_COLLECTION_VOICE'].limitationList.length}个` : '不限制'}}
                <i class="zhk-list_rarrow"></i>
              </div>
            </li>
            <li v-if="type==51||type==55||type==57||type==58||type==59||type==60||type==61">
              <span>开放平台</span>
              <div>
                <mt-switch v-model="switchInfo['OPEN_COLLECTION_VOICE'].switchModel"
                           @change="handleSwitchChange(switchInfo['OPEN_COLLECTION_VOICE'])"></mt-switch>
              </div>
            </li>
          </ul>
        </template>
        <template v-if="type==51||type==55||type==57||type==58||type==59||type==60||type==61">
          <div class="ul-title">个性化设置</div>
          <ul class="ul-list mg20">
            <li>
              <span>
                防逃单语音提醒
                <i class="sub-text">打开后, 顾客扫收款码但“取消付款”, 设备会自动语音提醒</i>
              </span>
              <div>
                <mt-switch v-model="personalizationSetting.escapeWarnSwitchModel"
                           @change="handleSwitchChange({switchType:'ESCAPE_VOICE',switchModel:personalizationSetting.escapeWarnSwitchModel})"></mt-switch>
              </div>
            </li>
          </ul>
        </template>
        <template v-if="type==21||type==37||type==18">
          <div class="ul-title">个性化设置</div>
          <ul class="ul-list mg20">
            <li>
              <span>
                防逃单语音提醒
                <i class="sub-text">打开后, 顾客扫收款码但“取消付款”, 设备会自动语音提醒</i>
              </span>
              <div>
                <mt-switch v-model="personalizationSetting.escapeWarnSwitchModel"
                           @change="handleSwitchChange({switchType:'ESCAPE_VOICE',switchModel:personalizationSetting.escapeWarnSwitchModel})"></mt-switch>
              </div>
            </li>
          </ul>
          <ul class="ul-list mg20">
            <li>
              <span>
                多笔订单合并播报
                <i class="sub-text">打开后, 多笔订单同时支付设备会合并播报</i>
              </span>
              <div>
                <mt-switch v-model="personalizationSetting.mergeReport"
                           @change="handlePeronalSettingSwitchChange"></mt-switch>
              </div>
            </li>
          </ul>
          <ul class="no-flex">
            <li>
              <div>播报语速</div>
              <div class="mt-switch-box">
                <ul class="circles">
                  <li v-for="item in [1,2,3]"
                      :key="item"
                      @click="rangeChange(item)"></li>
                </ul>
                <ul class="rang-text">
                  <li>1倍</li>
                  <li>1.2倍</li>
                  <li>1.5倍</li>
                </ul>
                <mt-range v-model="rangeValue"
                          :min="1"
                          :max="3"
                          :step="1"
                          :bar-height="4"
                          @change="handlePeronalSettingSwitchChange"></mt-range>
              </div>
            </li>
          </ul>
        </template>
        <div class="tip">
          <p>• 仅包括使用收银台收款的支付宝、微信订单播报；</p>
          <p>• 不包含：外卖、会员卡储值、会员卡消费等业务订单及现金银行卡的订单；</p>
          <p>• 此处智能POS收款指内置的快享付软件收款，智慧盒子收款指内置快享付通用版软件收款。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
// import paymentCode from "./paymentCode";
import selecteDevice from "./selecteDevice";
// import selecteStaff from "./selecteStaff";
import { Toast, Range } from "mint-ui";
Vue.component(Range.name, Range);
export default {
  name: "bindingStore",
  data() {
    return {
      sn: this.$route.query.sn,
      shopId: this.$route.query.shopId,
      type: this.$route.query.type,
      shopName:"",
      deviceName: this.$route.query.deviceName,
      //paymentCodeShow: false,
      selecteDeviceShow: false,
      //selecteStaffShow: false,
      personalizationSetting: {escapeWarnSwitchModel:false},
      switchInfo: {
        QRCODE_VOICE: {switchModel:false},
        APP_COLLECTION_VOICE:  {switchModel:false},
        PC_COLLECTION_VOICE:  {switchModel:false},
        POS_COLLECTION_VOICE:  {switchModel:false},
        SMART_BOX_COLLECTION_VOICE:  {switchModel:false},
        MKL_COLLECTION_VOICE:  {switchModel:false},
        BOX_COLLECTION_VOICE:  {switchModel:false},
        OPEN_COLLECTION_VOICE:  {switchModel:false},
        ESCAPE_VOICE:  {switchModel:false}
      },
      rangeValue: 1,
      timer: null,
      loadding: false
    };
  },
  methods: {
    goBack() {
      if (this.selecteDeviceShow) {
        this.selecteDeviceShow = false;
      } else {
        if (String(this.$route.query.close) == "true") {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    //深拷贝
    deepCopy(v) {
      if (v) {
        return JSON.parse(JSON.stringify(v));
      } else {
        return v;
      }
    },
    //播报语速值转换(控件值和提交给后台值的转换) isRange:true控件值转成请求需要的值
    rangeFormate(value, isRange) {
      let v = "";
      if (isRange) {
        if (value === 1) {
          v = 10;
        } else if (value === 2) {
          v = 12;
        } else if (value === 3) {
          v = 15;
        } else {
          v = 10;
        }
      } else {
        if (value === 10) {
          v = 1;
        } else if (value === 12) {
          v = 2;
        } else if (value === 15) {
          v = 3;
        } else {
          v = 1;
        }
      }
      return v;
    },
    rangeChange(v) {
      this.rangeValue = v;
      this.handlePeronalSettingSwitchChange();
    },
    //查询设置开关信息
    getSwitchInfo() {
      //const url = `app/voice/switchInfo.do?sn=${this.sn}&shopId=${this.shopId}`;
      const url = `newapp/setting/voiceDevice/settingInfo.do`;
      this.ajax({
        url: url,
        type: "post",
        data: {
          sn:this.sn,
          shopId: this.shopId
        },
        controlLoading: false
      })
        .then(res => {
          if (res.success == true) {
            this.shopName = res.resultObject.shopName;
            if (res.resultObject.personalizationSetting) {
              let personalizationSetting =
                res.resultObject.personalizationSetting;
              if (!isNaN(personalizationSetting.voiceSpeed)) {
                personalizationSetting.voiceSpeed = Number(
                  personalizationSetting.voiceSpeed
                );
              }
              if (personalizationSetting.escapeWarnSwitch == "OPEN") {
                personalizationSetting.escapeWarnSwitchModel = true;
              } else {
                personalizationSetting.escapeWarnSwitchModel = false;
              }
              this.personalizationSetting =personalizationSetting;
              this.rangeValue = this.rangeFormate(
                this.personalizationSetting.voiceSpeed
              );

            }
            let temp = res.resultObject.userSwitchSettings;
            let switchInfo={};
            for (let i = 0; i < temp.length; i++) {
              switchInfo[temp[i].switchType] = temp[i];
              if (switchInfo[temp[i].switchType].switchSet == "OPEN") {
                switchInfo[temp[i].switchType].switchModel = true;
              } else {
                switchInfo[temp[i].switchType].switchModel = false;
              }
            }
            this.switchInfo = switchInfo;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    //设置开关
    handleSwitchChange(item) {
      if (this.loadding) {
        return;
      }
      if(item.switchType=="ESCAPE_VOICE"&&item.switchModel&&!this.switchInfo['QRCODE_VOICE'].switchModel){
        Toast("请先开启收款码播报收款开关");
        this.$nextTick(()=>{
          this.personalizationSetting.escapeWarnSwitchModel = false;
          this.personalizationSetting.escapeWarnSwitch = 'CLOSED';
        });
      }else{
        this.loadding = true;
      let params = {
        sn: this.sn,
        shopId: this.shopId,
        switchType: item.switchType,
        type:this.type,
        switchSet: item.switchModel?"OPEN":"CLOSED"
      };
      this.ajax({
        url: "/newapp/setting/voiceDevice/switchSet.do",
        type: "post",
        data: params,
        controlLoading: false
      })
        .then(res => {
          this.loadding = false;
          this.getSwitchInfo();
          if (!res.success) {
            Toast("设置失败");
          }
        })
        .catch(err => {
          this.loadding = false;
        });
      }

    },

    handlePeronalSettingSwitchChange() {
      if (this.loadding) {
        return;
      }
      this.loadding = true;
      let params = {
        sn: this.sn,
        shopId: this.shopId,
        type:this.type,
        mergeReport: this.personalizationSetting.mergeReport,
        voiceSpeed: this.rangeFormate(this.rangeValue, true)
      };
      this.ajax({
        url: "/newapp/setting/voiceDevice/peronalSetting.do",
        type: "post",
        data: params,
        controlLoading: false
      })
        .then(res => {
          this.loadding = false;
          this.getSwitchInfo();
          if (!res.success) {
            Toast("设置失败");
          }
        })
        .catch(err => {
          this.loadding = false;
        });
    },
    //选择收款码
    // showPaymentCode(item) {
    //   this.paymentCodeShow = true;
    //   this.$nextTick(() => {
    //     this.$refs.paymentCode.popupShow(item);
    //   });
    // },
    // handlePaymentCodeCancel() {
    //   this.paymentCodeShow = false;
    // },
    // showSelecteStaff(item) {
    //   this.selecteStaffShow = true;
    //   this.$nextTick(() => {
    //     this.$refs.selecteStaff.popupShow(item);
    //   });
    // },
    // handleSelecteStaffChecked(codes) {
    //   this.selecteStaffShow = false;
    //   this.getSwitchInfo();
    // },
    // handleSelecteStaffCheckedCancel() {
    //   this.selecteStaffShow = false;
    // },
    showSelecteDevice(item) {
      this.selecteDeviceShow = true;
      this.$nextTick(() => {
        this.$refs.selecteDevice.popupShow(item);
      });
    },
    handleSelecteDeviceChecked(codes) {
      this.selecteDeviceShow = false;
      this.getSwitchInfo();
    },
    handleSelecteDeviceCheckedCancel() {
      this.selecteDeviceShow = false;
    },
    // handleSetChecked(codes) {
    //   this.paymentCodeShow = false;
    //   this.getSwitchInfo();
    // }
  },
  created() {
    this.getSwitchInfo();
  },
  components: {
    customHeader,
    selecteDevice
  }
};
</script>

<style lang="scss" scoped>
@import "qrCodeSound";
</style>
<style lang="scss" scoped>
.mint-switch {
  display: inline-flex;
}
</style>
